<template>
  <div class="inpourbalance">
    <div class="user-balance container">
      <div class="balance-title">账户余额</div>
      <div class="balance-amount">¥ <span id="balanceAmount">0</span> 元</div>
      <div class="balance-desp">
        所有区域<span th:text="${AppConfig.wxmpName}">充电家</span>可用
      </div>
    </div>

    <div class="inpour-prices container">
      <div class="inpour-prices-title">选择以下金额充值</div>
      <div class="inpour-prices-container weui-flex">
        <div class="weui-flex__item" th:each="price : ${prices}">
          <div
            class="inpour-price"
            th:attr="data-price=${price.price},data-redpack=${price.redpack},data-inpouramount=${price.inpourAmount}"
            th:id="|inpourPrice${price.id}|"
          >
            <div class="inpourAmount">
              <span th:text="${price.inpourAmount/100}"></span>元
            </div>
            <div class="price" th:if="${price.redpack <= 0}">
              售价：<span th:text="${price.price/100}"></span>元
            </div>
            <div class="price" th:if="${price.redpack > 0}">
              赠送：<span th:text="${price.redpack/100}"></span>元
            </div>
            <div class="inpour-redpack" th:if="${price.redpack > 0}">
              <img src="~@/assets/img/redpack.png" width="18" height="18" />
            </div>
          </div>
        </div>
      </div>
      <div class="inpour-prices-remark"></div>
    </div>
    <div class="charging-opts container">
      <div class="btn-area">
        <button class="weui-btn btn-primary btn-wxpay">
          微信支付<span id="realPayAmount"></span>
        </button>
      </div>
      <div class="inpour-tips">
        <div>
          温馨提示：<br />
          扫描充电插座旁边的二维码充值专用余额有优惠；<br />
          申请退款时充值享受到的赠送金额将会被全部扣除，敬请谅解。
        </div>
      </div>
    </div>

    <div style="display: none" id="templates"></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style scoped lang="less">
.container {
  background: #fff;
  font-size: 1em;
}

.fixed-bottom {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 1000;
  bottom: 0;
  margin-bottom: 0;
  padding: 4px;
}

.button-bar {
  padding: 8px 16px;
}

.weui-btn {
  font-size: 1em;
}

.inpour-prices {
  margin-top: 10px;
  padding: 5px 0;
}

.inpour-prices .weui-flex__item {
  width: 31.33%;
  margin: 1%;
  flex: none;
  -webkit-flex: none;
  text-align: center;
}

.inpour-prices .weui-flex {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  display: flex;
  width: 90%;
  margin: 10px auto;
}

.inpour-prices .inpour-prices-remark {
  font-size: 0.8em;
  color: #bbb;
  margin-top: 4px;
  padding: 0 8px;
}

.inpour-prices .inpour-price {
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 10px 0;
}

.inpour-prices .inpour-price.selected {
  border: 1px solid #0e68c3;
  /* #50AE55 */
  background-image: url(~@/assets/img/sel.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 1.2em;
  z-index: 10;
}

.inpour-price {
  font-size: 1em;
  position: relative;
  margin-top: 12px;
  z-index: 1;
}

.inpour-price .inpour-redpack {
  position: absolute;
  top: -12px;
  left: 6px;
  z-index: 999;
}

.inpour-price .inpourAmount {
  font-size: 1em;
}

.inpour-price .price {
  font-size: 0.6em;
  color: #999;
}

.btn-area {
  width: 88%;
  margin: 10px auto;
  padding-top: 10px;
}

.inpour-tips {
  padding-left: 1em;
  padding-right: 1em;
  font-size: 0.9em;
  color: #666;
}

.btn-area .btn-primary {
  color: #fff;
  background: #0e68c3;
}

.inpour-prices-title {
  font-size: 1em;
  text-align: center;
  color: #666;
}

.user-balance {
  background: #eee;
  padding-bottom: 3.5em;
  padding-top: 2em;
  background: url(~@/assets/img/cz_topbg.png) no-repeat;
  background-size: 100% 100%;
}

.user-balance .balance-title {
  text-align: center;
  font-size: 1em;
  color: #eee;
}

.user-balance .balance-amount span {
  text-align: center;
  font-size: 2em;
}

.user-balance .balance-amount {
  text-align: center;
  font-size: 1.5em;
  color: #fff;
}

.user-balance .balance-desp {
  text-align: center;
  font-size: 0.9em;
  color: red;
}
</style>
